<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 新建 -->
      <div el-row class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">数据源配置</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div>
            <!--<el-button size="small" @click="">禁用</el-button>-->
            <el-button
              class="bg_button"
              size="medium"
              @click="dialogVisible = true"
              type="primary"
              >新建</el-button
            >
          </div>
        </div>
      </div>
      <!-- label -->
      <el-row class="main-el-row-content">
        <el-table
          :data="showData"
          height="620px"
          class="my-table"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
        >
          <el-table-column prop="name" label="名称" align="left">
          </el-table-column>
          <el-table-column prop="ip" label="ip" align="left"> </el-table-column>
          <el-table-column prop="port" label="端口" align="left">
          </el-table-column>
          <el-table-column prop="username" label="用户名" align="left">
          </el-table-column>
          <el-table-column prop="instance" label="实例名" align="left">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
              <el-button
                type="text"
                @click="editSource(scope.row.id, 'edit')"
                size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
              <el-button
                type="text"
                style="color: #fe2e64"
                @click="editSource(scope.row.id, 'del')"
                size="small"
                ><span class="el-icon-delete">删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="div-el-pagination" v-show="pageFlag">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          background
          layout="prev, pager, next, total, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新建 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="647px"
      height="395px"
      class="add_date"
    >
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">新建</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <el-form :model="form2" label-width="150px" ref="form2" :rules="rules">
        <el-form-item label="数据源名称" prop="name">
          <el-input v-model="form2.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input v-model="form2.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input
            v-model="form2.port"
            autocomplete="off"
            value="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据库用户名" prop="username">
          <el-input v-model="form2.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据库密码" prop="password">
          <el-input
            v-model="form2.password"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据库实例名" prop="instance">
          <el-input v-model="form2.instance" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div style="padding: 0 40px">
        <el-button size="small" type="success" @click="connectionTest('form2')"
          >连 接 测 试</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="saveInfo('form2')"
          >新 建</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog :visible.sync="dialogEdit" width="647px" height="395px">
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">编辑</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <el-form :model="form3" label-width="150px" ref="form3" :rules="rules">
        <el-form-item label="数据源名称" prop="name">
          <el-input v-model="form3.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input v-model="form3.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input v-model="form3.port" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据库用户名" prop="username">
          <el-input v-model="form3.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据库密码" prop="password">
          <el-input
            v-model="form3.password"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据库实例名" prop="instance">
          <el-input v-model="form3.instance" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="dialogEdit = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="updateInfo('form3')"
          >确 认</el-button
        >
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog :visible.sync="dialogDelete" width="647px" height="395px">
      <div slot="title" class="dialog-title">
        <el-row class="red">
          <span class="dialog-title-text">删除</span>
          <span class="dialog-title-you"></span>
          <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
        </el-row>
      </div>
      <el-form :model="form4" label-width="150px" ref="form4" :rules="rules">
        <el-form-item label="数据源名称">
          <el-input
            v-model="form4.name"
            readonly
            autocomplete="off"
            class="no_yon"
          ></el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input
            v-model="form4.ip"
            readonly
            autocomplete="off"
            class="no_yon"
          ></el-input>
        </el-form-item>
        <el-form-item label="端口号">
          <el-input
            v-model="form4.port"
            readonly
            autocomplete="off"
            class="no_yon"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据库用户名">
          <el-input
            v-model="form4.username"
            readonly
            autocomplete="off"
            class="no_yon"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据库密码">
          <el-input
            v-model="form4.password"
            type="password"
            readonly
            autocomplete="off"
            class="no_yon"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据库实例名">
          <el-input
            v-model="form4.instance"
            readonly
            autocomplete="off"
            class="no_yon"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" class="bg_button" @click="dialogDelete = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="bg_button"
          type="primary"
          @click="deleteInfo(form4.id)"
          >确 认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { post } from "../../utils/request";
export default {
  name: "ConnectionView",
  data() {
    let validcodeip = (rule, value, callback) => {
      const reg =
        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; // 验证是否符合ip格式
      // const reg =
      // /^(24[8-9]|25[0-5])\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/; // 验证范围在248.0.0.0~255.255.255.255之间的ip
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("输入格式不合法！"));
      }
    };
    return {
      dialogVisible: false,
      dialogEdit: false,
      dialogDelete: false,
      currentRow: null,
      form: {
        date1: "",
        date2: "",
      },
      total: 0,
      pageFlag: true,
      pageSize: 11,
      currentPage: 1,
      form2: {
        id: "",
        name: "",
        ip: "",
        port: "",
        username: "",
        password: "",
        instance: "",
      },
      form3: {
        id: "",
        name: "",
        ip: "",
        port: "",
        username: "",
        password: "",
        instance: "",
      },
      form4: {
        id: "",
        name: "",
        ip: "",
        port: "",
        username: "",
        password: "",
        instance: "",
      },
      showData: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入数据库名称",
            trigger: "blur",
          },
        ],
        ip: [
          {
            required: true,
            message: "请输入ip",
            trigger: "blur",
          },
          {
            validator: validcodeip,
            message: "请输入正确ip",
            trigger: "blur",
          },
        ],
        port: [
          {
            required: true,
            message: "请输入数据库端口",
            trigger: "blur",
          },
          {
            pattern: /^[0-9]*[1-9][0-9]*$/,
            message: "端口号必须为正整数",
          },
        ],
        username: [
          {
            required: true,
            message: "请输入数据库用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入数据库密码",
            trigger: "blur",
          },
        ],
        instance: [
          {
            required: true,
            message: "请输入数据库实例名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init: function () {
      this.getDataSourceList();
    },
    // 点击的是第几页
    handleCurrentChange(currentPage) {
      this.listLoading = true;
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getDataSourceList();
    },
    // 发送请求 获取一定个数实现分页
    getDataSourceList() {
      var that = this;
      var params = {
        pageSize: that.pageSize, // 一页有几条数据
        pageNum: that.currentPage, // 当前点击的是第几页
      };
      console.log(params);
      // 发送请求 （但无数据库暂时不能请求）
      post("/api/idatamanage/dataTransferConfig/queryDataSource", params).then(
        (res) => {
          console.log("数据", res.data.data.dataList);
          this.showData = res.data.data.dataList;
          this.total = res.data.data.total;
        }
      );
    },
    // 对数据进行加密处理
    RSAjiami() {
      console.log(this.form2.password);
      this.form2.passwordjm = this.$encruption("admin");
      console.log(this.form2.passwordjm);
      let passwordEncryp = this.$encruption(this.form2.password);
      console.log(passwordEncryp);
    },
    // 在新建弹窗中的按钮事件 当点击测试链接的时候执行该操作
    connectionTest(formName) {
      // 测试连接
      this.$refs[formName].validate((valid) => {
        this.RSAjiami();
        if (valid) {
          var that = this;
          let data = {
            ip: that.form2.ip,
            password: that.form2.passwordjm,
            port: that.form2.port,
            username: that.form2.username,
            instance: that.form2.instance,
          };
          console.log(data);
          this.listLoading = true;
          // 在此处向测试接口进行发送请求,根据后台返回的字段进行alert提示
          console.log("测试");
          post("/api/idatareceive/subCollectListener/checkConnnection", data)
            .then((res) => {
              console.log("链接测试", res.data.data);
              if (res.data.data) {
                that.$message({
                  message: "连接测试成功",
                  type: "success",
                });
              } else {
                that.$message({
                  message: "连接测试失败",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("保存失败");
            })
            .finally(() => {
              this.listLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新建
    saveInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.RSAjiami();
          // let data = this.form2;
          let data = {
            //   ip: this.form2.ip,
            //   password: this.form2.passwordjm,
            //   port: this.form2.port,
            //   username: this.form2.username,
            //   instance: this.form2.instance,
            instance: this.form2.instance,
            ip: this.form2.ip,
            name: this.form2.name,
            password: this.form2.passwordjm,
            port: this.form2.port,
            username: this.form2.username,
          };
          this.listLoading = true;
          // 发送post请求将data传递给后台交由后台保存
          console.log(data);
          post("/api/idatamanage/dataTransferConfig/addDataSource", data)
            .then((res) => {
              console.log("res=>", res.data);
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.getDataSourceList();
              this.cleanForm2();
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("保存失败");
            })
            .finally(() => {
              this.listLoading = false;
            });
          // 最后成功时间将弹窗隐藏
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑
    updateInfo(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          console.log(this.form3);
          // let data = this.form3;
          this.RSAjiami();
          // let data = this.form2;
          let data = {
            //   ip: this.form2.ip,
            //   password: this.form2.passwordjm,
            //   port: this.form2.port,
            //   username: this.form2.username,
            //   instance: this.form2.instance,
            instance: this.form3.instance,
            ip: this.form3.ip,
            name: this.form3.name,
            password: this.form3.passwordjm,
            port: this.form3.port,
            username: this.form3.username,
          };
          this.listLoading = true;
          // 在此处发送请求将data传递给后台 让其对数据库进行修改
          console.log(data);
          post("/api/idatamanage/dataTransferConfig/updateDataSource", data)
            .then((res) => {
              console.log("res=>", res.data);
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.dialogEdit = false;
              this.getDataSourceList();
              this.cleanForm2();
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("保存失败");
            })
            .finally(() => {
              this.listLoading = false;
            });
          // 修改成功时将弹窗隐藏
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改
    editSource(id, type) {
      var that = this;
      if (type == "del") {
        that.dialogDelete = true;
      } else {
        that.dialogEdit = true;
      }
      var params = {
        id: id,
        pageSize: that.pageSize, // 一页有几条数据
        pageNum: that.currentPage, // 当前点击的是第几页
      };
      post("/api/idatamanage/dataTransferConfig/queryDataSource", params)
        .then((res) => {
          console.log("res=>", res.data.data.dataList[0]);
          //alert(type);
          if (type == "del") {
            that.form4 = res.data.data.dataList[0];
          } else {
            that.form3 = res.data.data.dataList[0];
          }
        })
        .catch((error) => {
          console.log(error);
          //this.$message.error('保存失败');
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 删除
    deleteInfo(id) {
      //alert(id);
      console.log(id);
      var params = {
        id: id,
      };
      // 请求接口将params 传递给后台进行删除
      console.log(params);
      post("/api/idatamanage/dataTransferConfig/deleteDataSource", params)
        .then((res) => {
          console.log("res=>", res);
          this.$message({
            message: res.data.message,
            type: "success",
          });
          // 删除成功时在将其弹窗隐藏
          this.dialogDelete = false;
          this.getDataSourceList();
        })
        .catch((error) => {
          console.log(error);
          //this.$message.error('保存失败');
          this.pageFlag = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    // 设置form 字段
    cleanForm2() {
      var that = this;
      that.form2 = {
        id: "",
        name: "",
        ip: "",
        port: "",
        username: "",
        password: "",
        instance: "",
      };
    },
  },
};
</script>
<style src="../../assets/css/common.css"></style>
<style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}

::v-deep .el-form-item__label {
  color: #fff !important;
}

// ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
//   background-color: rgb(9, 89, 138) !important; // 鼠标悬浮样式
//   // background: red !important;
// }

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #fff;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}
::v-deep .el-table--striped {
  .el-table__body {
    tr.el-table__row--striped {
      td.el-table__cell {
        background: #0077a9;
      }
    }
  }
}
// ::v-deep .el-table--enable-row-transition {
//   .el-table__body {
//     td.el-table__cell {
//       background: rgb(0, 58, 80);
//       border-bottom: 1px solid #000 !important;
//     }
//   }
// }
</style>